<template>
  <div>
    <NavBar>
      <template slot="content">
        <div>产品动态</div>
      </template>
    </NavBar>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <template slot="finished" v-if="list.length !== 0">没有更多了</template>
      <template slot="finished" v-if="list.length === 0">
        <div class="content-empty">
          <img src="./img/empty.png" />
          <div class="content-empty-text">暂无内容</div>
        </div>
      </template>
      <div v-for="item in list" :key="item.id" @click="handleClick(item)">
        <div class="dynamics-date">{{ item.sendTime }}</div>
        <div class="dynamics-content">
          <van-badge :dot="item.readFlag === 'N'">
            <div class="dynamics-title">{{ item.productName }}</div>
            <div>
              <img
                class="dynamics-picture"
                :src="item.messagePicUrl"
                alt="图片已消失"
              />
            </div>
            <div
              class="c-1fe3zj flex-row flex-align-center flex-justify-between"
            >
              <div class="dynamics-detail">查看详情</div>
              <van-icon
                class="dynamics-icon"
                name="arrow"
                size="15"
                color="#999"
              />
            </div>
          </van-badge>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import API from '@/services/h5/product.js'
import NavBar from '@/components/h5header'
export default {
  components: { NavBar },
  data() {
    return {
      list: [],
      curPage: 0,
      length: 10,
      loading: false,
      finished: false
    }
  },
  created() {
    this.onLoad()
  },
  methods: {
    async onLoad() {
      this.loading = true
      this.finished = false
      this.curPage += 1
      let params = {
        curPage: this.curPage,
        length: this.length
      }
      const res = await API.getDynamicsList(params)
      if (res && res.data && res.data.code === 1000) {
        this.list = this.list.concat(res.data.data.list)
        if (this.list.length < res.data.data.count) {
          this.loading = false
        } else {
          this.loading = false
          this.finished = true
          return
        }
      }
    },
    handleClick(item) {
      this.$router.push({
        path: '/productDynamicsDetail',
        query: {
          ...item
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
/deep/.van-nav-bar .van-icon {
  color: #999;
}
.dynamics-date {
  text-align: center;
  margin: 20px 0 15px 0;
  font-size: 13px;
  color: #b5b5b5;
}
.dynamics-content {
  position: relative;
  background-color: #fff;
  width: 315px;
  // height: 252px;
  margin: 0 auto;
  padding: 15px;
  box-shadow: 0 0 2px 2px #f4f4f4;
}
.dynamics-picture {
  width: 315px;
  height: 150px;
}
img {
  width: 100%;
}
.dynamics-title {
  font-size: 15px;
  padding-bottom: 15px;
  text-indent: 1em;
  font-weight: bold;
  color: #333;
}
.dynamics-detail {
  bottom: 13px;
  font-size: 13px;
  color: #333;
}
.c-1fe3zj {
  margin-top: 10px;
}
</style>
